{% extends 'base.html' %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="row">
        <!-- 左侧导航栏 -->
        <div class="col-md-3">
            <div class="position-sticky" style="top: 2rem;">
                <div class="list-group">
                    {% for section in template.sections.all %}
                    <a href="#section-{{ section.id }}" 
                       class="list-group-item list-group-item-action section-nav"
                       data-section-id="{{ section.id }}">
                        {{ section.title }}
                        <span class="badge bg-primary float-end section-status">
                            <i class="bi bi-circle"></i>
                        </span>
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- 右侧表单内容 -->
        <div class="col-md-9">
            <h2 class="mb-4">{{ template.title }}</h2>
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                
                {% for section in template.sections.all %}
                <div class="card mb-4" id="section-{{ section.id }}">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">{{ section.title }}</h5>
                    </div>
                    <div class="card-body">
                        {% for field in section.formfield_set.all %}
                        <div class="mb-3 field-container" data-section-id="{{ section.id }}">
                            <label class="form-label">
                                {{ field.label }}
                                {% if field.required %}
                                <span class="text-danger">*</span>
                                {% endif %}
                            </label>
                            
                            {% if field.field_type == 'text' %}
                                <input type="text" class="form-control" 
                                       name="field_{{ field.id }}"
                                       {% if field.required %}required{% endif %}>
                            
                            {% elif field.field_type == 'number' %}
                                <input type="number" class="form-control" 
                                       name="field_{{ field.id }}"
                                       {% if field.required %}required{% endif %}>
                            
                            {% elif field.field_type == 'radio' %}
                                {% for option in field.options.split %}
                                <div class="form-check">
                                    <input type="radio" class="form-check-input" 
                                           name="field_{{ field.id }}" 
                                           value="{{ option }}"
                                           id="field_{{ field.id }}_{{ forloop.counter }}"
                                           {% if field.required %}required{% endif %}>
                                    <label class="form-check-label" 
                                           for="field_{{ field.id }}_{{ forloop.counter }}">
                                        {{ option }}
                                    </label>
                                </div>
                                {% endfor %}
                            
                            {% elif field.field_type == 'checkbox' %}
                                {% for option in field.options.split %}
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" 
                                           name="field_{{ field.id }}" 
                                           value="{{ option }}"
                                           id="field_{{ field.id }}_{{ forloop.counter }}">
                                    <label class="form-check-label" 
                                           for="field_{{ field.id }}_{{ forloop.counter }}">
                                        {{ option }}
                                    </label>
                                </div>
                                {% endfor %}
                            
                            {% elif field.field_type == 'select' %}
                                <select class="form-select" 
                                        name="field_{{ field.id }}"
                                        {% if field.required %}required{% endif %}>
                                    <option value="">请选择...</option>
                                    {% for option in field.options.split %}
                                    <option value="{{ option }}">{{ option }}</option>
                                    {% endfor %}
                                </select>
                            
                            {% elif field.field_type == 'image' %}
                                <input type="file" class="form-control" 
                                       name="field_{{ field.id }}"
                                       accept="image/*" multiple
                                       {% if field.required %}required{% endif %}>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}
                
                <div class="mb-4">
                    <button type="submit" class="btn btn-primary">提交表单</button>
                    <a href="{% url 'form_list' template.tenant.id %}" class="btn btn-outline-secondary ms-2">返回列表</a>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.section-nav.active {
    background-color: #e9ecef;
}
.section-nav.completed .section-status {
    background-color: #198754 !important;
}
.section-nav.incomplete .section-status {
    background-color: #dc3545 !important;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const sectionNavs = document.querySelectorAll('.section-nav');
    const fieldContainers = document.querySelectorAll('.field-container');
    
    // 监听滚动事件，更新导航栏活动状态
    window.addEventListener('scroll', function() {
        let currentSection = null;
        
        fieldContainers.forEach(container => {
            const rect = container.getBoundingClientRect();
            if (rect.top <= 100) {
                currentSection = container.dataset.sectionId;
            }
        });
        
        if (currentSection) {
            sectionNavs.forEach(nav => {
                nav.classList.toggle('active', nav.dataset.sectionId === currentSection);
            });
        }
    });
    
    // 监听字段变化，更新导航栏完成状态
    function updateSectionStatus(sectionId) {
        const section = document.querySelector(`#section-${sectionId}`);
        const fields = section.querySelectorAll('input, select');
        let isComplete = true;
        
        fields.forEach(field => {
            if (field.required && !field.value) {
                isComplete = false;
            }
        });
        
        const nav = document.querySelector(`.section-nav[data-section-id="${sectionId}"]`);
        nav.classList.toggle('completed', isComplete);
        nav.classList.toggle('incomplete', !isComplete);
    }
    
    // 为所有字段添加变化监听
    fieldContainers.forEach(container => {
        const sectionId = container.dataset.sectionId;
        const fields = container.querySelectorAll('input, select');
        
        fields.forEach(field => {
            field.addEventListener('change', () => {
                updateSectionStatus(sectionId);
            });
        });
    });
    
    // 点击导航项滚动到对应区域
    sectionNavs.forEach(nav => {
        nav.addEventListener('click', function(e) {
            e.preventDefault();
            const sectionId = this.dataset.sectionId;
            const section = document.querySelector(`#section-${sectionId}`);
            section.scrollIntoView({ behavior: 'smooth' });
        });
    });
});
</script>
{% endblock %} 